<template>
  <!-- 每个模版页必须有一个根节点标签 -->
  <div>
    <!-- 这里就是组件页面显示的内容 -->
    <div class="header">
      <div class="title">
        <div class="title-h" @click="back()">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="ionicon"
              viewBox="0 0 512 512"
            >
              <path
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="48"
                d="M328 112L184 256l144 144"
              />
            </svg>
          </div>
          <div class="txt-h">扫一扫</div>
        </div>
      </div>
    </div>
    <div class="content_panel">
      <scanCodePage
        @addDataText="getQrcode"
        width="380px"
        height="400px"
      ></scanCodePage>
    </div>
  </div>
</template>
<script>
//引入外部组件
//import menu from ''
import scanCodePage from "@/components/scanCodePage.vue";
export default {
  name: "paymentsweep", //定义组件的名称
  components: {
    //引入外部组件，这里是定义
    scanCodePage,
  },
  methods: {
    async getQrcode(data) {
      //从Vuex获取当前用户信息
      let user = JSON.parse(this.$store.state.Authorization) ;
      let current_uid=user.user_id;
      //验证收款人的id是否合法
      //使用URL对象解析链接
      let user_id = new URL(data.Qrcode).searchParams.get('uid');
      //如果收款人是自己跳转链接
      if(current_uid==user_id){
         this.$router.push('/');
      }
      //http://localhost:8080/paymentManagerSystem/fkx?uid=1&t=1681267525
      //请求后端进行用户验证，是否合法
      var resData = await this.$http.post("fkx", { user_id: user_id });
      console.log(resData.state);
      //如果验证成功，跳转到付款页面
      if (resData.state == 200) {
        //验证成功将收款人的信息放入Vuex中
        this.$store.commit('setPayee',JSON.stringify(resData.data));
        this.$router.push("/paymentpage");
      } else {
        this.$alert('该收款账户不可用', '验证失败', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push("/");
          }
        });
      }
    },
    back(){
      this.$router.push("/");
    }
  },
};
</script>
<style scoped>
/* 独立组件的样式，写这里，支持标准的css语法 */
/* 顶部搜索栏 */
.header {
  background-color: #ffffff;
  color: #000;
  width: 100%;
  border-bottom: solid 1px #ccc;
}

.header .title {
  font-size: 18px;
  margin-left: 20px;
  padding: 20px 0;
}

.title-h {
  display: flex;
  flex-direction: row;
  vertical-align: middle;
  align-items: center;
}

.title-h .icon {
  width: 30px;
  height: 30px;
}

.content_panel{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}


</style>
<style>
.el-message-box {
  width:235px;
}
</style>